import './App.css'
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom'
import Home from './pages/Home'
import About from './pages/About'
import User from './pages/User'
import UserList from './pages/UserList'
import UserDetail from './pages/UserDetail'
function App() {

  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/user">用户主页</Link>
          </li>
          <li>
            <Link to="/user/list">用户列表</Link>
          </li>
          <li>
            <Link to="/user/123">用户详情</Link>
          </li>
        </ul>
      </nav>
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path="/about" Component={About} />
        <Route path="/user">
          <Route index element={<User />} />
          <Route path="list" element={<UserList />} />
          <Route path=":id" element={<UserDetail />} />
        </Route>
      </Routes>
    </Router>
  )
}

export default App
